<template>
  <div class="app-container">
    <vue-element-loading
      :active="this.$store.state.elementloading.vueElementLoading"
      spinner="spinner"
      color="#FF6700"
    />
    <el-card shadow="never">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchMap"
        style="margin-top: 20px;margin-left: 0px"
      >
        <el-form-item prop="username">
          <el-input v-model="searchMap.username">
            <template slot="prepend">用户名称</template>
          </el-input>
        </el-form-item>
        <el-button @click="searchUser" icon="el-icon-search"></el-button>
      </el-form>

      <el-button-group style="margin-bottom:20px">
        <el-button @click="openNew" size="small" type="primary" icon="el-icon-plus"></el-button>
        <el-button @click="handleEdit(radio)" size="small" type="primary" icon="el-icon-edit"></el-button>
        <el-button @click="deleteUser(radio)" size="small" type="primary" icon="el-icon-delete"></el-button>
      </el-button-group>

      <!-- 数据列表
    :data 绑定渲染的数据
    border 表格边框
      -->
      <el-table
        border
        :data="list"
        style="width: 100%"
        @row-click="chooseone"
        highlight-current-row
      >
        <el-table-column width="55">
          <template slot-scope="scope">
            <el-radio v-model="radio" :label="scope.row.id">
              <span class="el-radio__label"></span>
            </el-radio>
          </template>
        </el-table-column>
        <!-- type="index"获取索引值，labal显示标题，prop 数据字段名 -->
        <el-table-column align="center" prop="uName" label="用户名称"></el-table-column>
        <el-table-column align="center" prop="uNickname" label="昵称"></el-table-column>
        <el-table-column align="center" prop="uRemark" label="备注"></el-table-column>
        <!-- <el-table-column align="center" prop="role" label="所属角色"></el-table-column> -->
        <el-table-column align="center" prop="uCreateTime" label="创建时间"></el-table-column>
        <el-table-column align="center" prop="handle" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleRole(scope.row.id)">分配角色</el-button>
            <el-button size="mini" type="danger" @click="resetpassword(scope.row.id)">重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <template slot="footer"></template>
    </el-card>

    <component v-bind:is="userAdd" ref="addUser"></component>

    <component v-bind:is="addRole" ref="addRole"></component>
  </div>
</template>


<script>
import addRole from "./components/addRole";
import accountApi from "@/api/account";
import userAdd from "./components/edit";
import VueElementLoading from "vue-element-loading";
export default {
  components: {
    VueElementLoading,
    userAdd,
    addRole
  },
  data() {
    return {
      userAdd: userAdd,
      addRole: addRole,
      total: 0, //总记录数
      list: [],
      currentPage: 1, //当前页码
      pageSize: 5, // 每页显示10条数据
      searchMap: {
        username: ""
      },
      radio: null, // 如果使用单选框，定义一个model值
      pojo: {}
    };
  },

  created() {
    // 初始化获取列表数据
    this.fetchData();
  },

  methods: {

    handleRole(id) {
      this.$refs.addRole.getRoles(id);
    },

    chooseone(row) {
      console.log(row)
      this.radio = row.id;
      this.pojo = row;
    },
    // 当每页显示条数改变后，被触发，val是最新的显示条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.fetchData();
    },
    // 当页码改变后，被触发，val是最新的页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.fetchData();
    },
    changepassword(id) {
      console.log("重置密码", id);
    },
    // 查询账户信息
    fetchData() {
      // 调用分页查询
      var vm = this.$store;
      vm.commit("updateLoading", true);
      console.log(
        "是否开启加载",
        this.$store.state.elementloading.vueElementLoading
      );
      accountApi
        .selectAllUser(this.searchMap.username, this.currentPage, this.pageSize)
        .then(resp => {
          this.list = resp.data.rows;
          this.total = resp.data.total;
          if (resp.data.rows) {
            vm.commit("updateLoading", false);
            console.log(
              "是否开启加载",
              this.$store.state.elementloading.vueElementLoading
            );
          }
        });
    },

    searchUser() {
      this.currentPage = 1;
      this.fetchData();
    },

    openNew() {
      // this.$refs.addUser.user.uType= 2;
      this.$refs.addUser.isEdit = false;
      this.$refs.addUser.title = "新增用户";
      this.$refs.addUser.editDialog = true;
    },

    handleEdit(id) {
      this.$refs.addUser.user = this.pojo;
      var uType = this.pojo.uType;
      this.$refs.addUser.user.uType = uType + "";
      this.$refs.addUser.isEdit = true;
      this.$refs.addUser.title = "更新用户";
      if (id != null && id != "") {
        this.$refs.addUser.editDialog = true;
      } else {
        this.$message({
          message: "请选择需要更改的用户哦!",
          type: "warning"
        });
      }
    },

    deleteUser(id) {
      if (id != null && id != "") {
        this.$confirm("此操作将永久删除该用户信息, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            accountApi.deleteUser(id).then(resp => {
              if (resp.data.code == 0) {
                this.$message({
                  message: "删除用户成功！",
                  type: "success"
                });
                this.fetchData();
                this.radio = "";
              } else {
                this.$message({
                  message: "删除用户失败！",
                  type: "warning"
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        this.$message({
          message: "请选择需要删除的用户哦！",
          type: "warning"
        });
      }
    },

    // 重置密码
    resetpassword(id) {
      if (id != null && id != "") {
        this.$confirm("此操作将重置该用户的密码, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            accountApi.resetPassword(id).then(resp => {
              if (resp.data.code == 0) {
                this.$message({
                  message: "重置密码成功，重置后的密码为 flypig",
                  type: "success"
                });
                this.searchBycompanyName();
                this.radio = "";
              } else {
                this.$message({
                  message: "重置密码信息失败",
                  type: "warning"
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消重置"
            });
          });
      } else {
        this.$message({
          message: "请选择需要重置密码的用户哦！",
          type: "warning"
        });
      }
    }
  }
};
</script>